<template>
  <simple-layout title="理财">
    <div id="content">
   <!--  <div class="title">
        <span class="tag"></span>稳健投资
      </div> -->
      <div class="finance-list" v-for="item in productList">
       <!-- <div class="finance-money">
          <div class="money">¥{{item.depositAmount}}</div>
          <div>{{item.productName}}</div>
        </div> -->
       <router-link :to="{name:'ProductContent',query:{product:item}}">
       <div class="finance-content">
         <div class="use"><span class="tag"></span>{{item.productName}}</div>
         <div><span v-for="vo in item.remark">{{vo}}</span></div>
       </div>
       </router-link>
      </div>
    </div>
  </simple-layout>
</template>


<script>
import SimpleLayout from "../../components/SimpleLayout";
import ProductService from '../../service/product';

export default {
  name: "Login",
  components: {
    //someComponent
    SimpleLayout
  },
  props: {},
  data() {
    return {
      msg: "Hello Vue.js",
      productfilter:{
        pageSize:10,
        pageNum:1
      },
      productList:[]
    };
  },
  computed: {},
  watch: {},
  mounted: function() {
    this.productList.push(this.$route.query.product)
    this.getProductList()
  },
  methods: {
    getProductList(){
      // ProductService.pruductList(this.productfilter).then(res=>{
      //   console.log(res);
      //   if(res.status == 200){
      //     this.productList = this.productList.concat(res.resultData.list);
      //     console.log(this.productList)
      //   }
      // })
    }
  }
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#content {
  height: 94vh;
  background: #F7F7F7;
  border-top: 1px solid rgba(153, 153, 153, 0.5);
  padding: 0 10px;
}
.title {
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 18px;
  font-weight: bold;
}
.tag {
  display: inline-block;
  width: 5px;
  height: 15px;
  background-color: #7174e7;
  margin-right: 3px;
  border-radius: 12px;
}

.finance-list {
  padding: 20px 10px;
  border-bottom: 1px solid rgba(153, 153, 153, 0.5);
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border-radius: 4px;
  margin-top: 10px;
}

div.finance-list:last-child {
  border-bottom: none;
}

.finance-money {
  width: 40%;
  text-align: left;
  color: #666;
  line-height: 2;
}
.finance-content {
  width: 80vw;
  text-align: left;
  color: #999;
  line-height: 2;
}

.money {
  color: #ff4500;
  font-size: 18px;
  font-weight: bold;
}

.use {
  color: #000;
  font-size: 16px;
  font-weight: bold;
}
</style>
